import Layer from '../core/Layer';
import Rectangle from '../base/Rectangle';
import Circle from '../base/Circle';
import Event from '../event/Event';

export default class extends Layer {
    constructor(canvas, style) {
        super(canvas, style);
        this.container = new Rectangle(canvas, {
            ...style,
            type: Rectangle.TYPE.STROKE,
            lineDash: [16, 12, 16],
            lineWidth: 1,
            left: '10px',
            bottom: '10px',
            width: 'calc(100% - 20px)',
            height: 'calc(100% - 20px)',
            zIndex: 999,
        });
        this.center = new Rectangle(canvas, {
            type: Rectangle.TYPE.STROKE,
            width: '40px',
            height: '40px',
            position: 'absolute',
            lineWidth: 1,
            left: 'calc(50% - 20px)',
            bottom: 'calc(50% - 20px)',
            zIndex: 999,
            color: '#333333',
        });
        this.centerCircle = new Circle(canvas, {
            radius: '28px',
            position: 'absolute',
            lineWidth: 1,
            left: '50%',
            bottom: '50%',
            zIndex: 999,
            color: '#333333',
        });
        this.topLeft = new Rectangle(canvas, {
            type: Rectangle.TYPE.STROKE,
            width: '20px',
            height: '20px',
            position: 'absolute',
            left: 0,
            bottom: 'calc(100% - 20px)',
            zIndex: 999,
            color: '#777777',
        });
        this.bottomLeft = new Rectangle(canvas, {
            type: Rectangle.TYPE.STROKE,
            width: '20px',
            height: '20px',
            position: 'absolute',
            color: '#777777',
            left: 0,
            zIndex: 999,
            bottom: 0,
        });
        this.rightTop = new Rectangle(canvas, {
            type: Rectangle.TYPE.STROKE,
            width: '20px',
            height: '20px',
            position: 'absolute',
            left: 'calc(100% - 20px)',
            color: '#777777',
            zIndex: 999,
            bottom: 'calc(100% - 20px)',
        });
        this.rightBottom = new Rectangle(canvas, {
            type: Rectangle.TYPE.STROKE,
            width: '20px',
            height: '20px',
            position: 'absolute',
            left: 'calc(100% - 20px)',
            color: '#777777',
            zIndex: 999,
            bottom: 0,
        });
        this.center.addEventListener(Event.EVENT_DRAG, (e) => {
            this.left = (this.left + e.distanceX) + 'px';
            this.bottom = (this.bottom + e.distanceY) + 'px';
            this.onResize && this.onResize(this, {
               left: this.left,
               bottom: this.bottom,
               width: this.width,
               height: this.height,
            });
            this.canvas.paint();
        });
        this.center.addEventListener(Event.EVENT_MOUSE_IN, (e) => {
            this.canvas.container.style.cursor = 'move';
        });
        this.center.addEventListener(Event.EVENT_MOUSE_OUT, (e) => {
            console.log(1111);
            this.canvas.container.style.cursor = 'default';
        });
        this.topLeft.addEventListener(Event.EVENT_DRAG, (e) => {
            this.left = (this.left + e.distanceX) + 'px';
            this.height = (this.height + e.distanceY) + 'px';
            this.onResize && this.onResize(this, {
                left: this.left,
                bottom: this.bottom,
                width: this.width,
                height: this.height,
            });
            this.canvas.paint();
        });
        this.topLeft.addEventListener(Event.EVENT_MOUSE_IN, (e) => {
            this.canvas.container.style.cursor = 'se-resize';
        });
        this.topLeft.addEventListener(Event.EVENT_MOUSE_OUT, (e) => {
            this.canvas.container.style.cursor = 'default';
        });
        this.bottomLeft.addEventListener(Event.EVENT_DRAG, (e) => {
            console.log('height===>', this.height + e.distanceY)
            this.left = (this.left + e.distanceX) + 'px';
            this.bottom = (this.bottom + e.distanceY) + 'px';
            this.height = (this.height - e.distanceY) + 'px';
            this.onResize && this.onResize(this, {
                left: this.left,
                bottom: this.bottom,
                width: this.width,
                height: this.height,
            });
            this.canvas.paint();
        });
        this.bottomLeft.addEventListener(Event.EVENT_MOUSE_IN, (e) => {
           this.canvas.container.style.cursor = 'ne-resize';
        });
        this.bottomLeft.addEventListener(Event.EVENT_MOUSE_OUT, (e) => {
            this.canvas.container.style.cursor = 'default';
        });
        this.rightTop.addEventListener(Event.EVENT_DRAG, (e) => {
           this.width = (this.width + e.distanceX) + 'px';
           this.height = (this.height + e.distanceY) + 'px';
            this.onResize && this.onResize(this, {
                left: this.left,
                bottom: this.bottom,
                width: this.width,
                height: this.height,
            });
           this.canvas.paint();
        });
        this.rightTop.addEventListener(Event.EVENT_MOUSE_IN, (e) => {
            this.canvas.container.style.cursor = 'ne-resize';
        });
        this.rightTop.addEventListener(Event.EVENT_MOUSE_OUT, (e) => {
            this.canvas.container.style.cursor = 'default';
        });
        this.rightBottom.addEventListener(Event.EVENT_DRAG, (e) => {
           this.width = (this.width + e.distanceX) + 'px';
           this.bottom = (this.bottom + e.distanceY) + 'px';
           this.height = (this.height - e.distanceY) + 'px';
            this.onResize && this.onResize(this, {
                left: this.left,
                bottom: this.bottom,
                width: this.width,
                height: this.height,
            });
           this.canvas.paint();
        });
        this.rightBottom.addEventListener(Event.EVENT_MOUSE_IN, (e) => {
            this.canvas.container.style.cursor = 'se-resize';
        });
        this.rightBottom.addEventListener(Event.EVENT_MOUSE_OUT, (e) => {
            this.canvas.container.style.cursor = 'default';
        });
        this.addChild(this.container, this.topLeft, this.bottomLeft, this.rightTop, this.rightBottom, this.centerCircle, this.center);
    }

    setVisible(visible) {
        this.container.visible = visible;
        this.center.visible = visible;
        this.centerCircle.visible = visible;
        this.topLeft.visible = visible;
        this.bottomLeft.visible = visible;
        this.rightTop.visible = visible;
        this.rightBottom.visible = visible;
        this.canvas.paint();

    }

    appendChild(node) {
        this.sprite = node;
        this.addChild(node);
    }
}
